<template>
  <div class='sub-category'>
    <div class="container">
      <!-- 面包屑导航 -->
      <SubHead :subCate="subCate"/>
      <!-- 筛选区域 -->
      <SubFilter :subCate="subCate" @filter-change="hFilterChange"/>
      <!-- 排序组件 -->
      <SubSort @sort-change="hSortChange"/>
      <!-- 商品列表 -->
      <div class="sort-list-container">
        <GoodsItem v-for="good in goodsList" :key="good.id" :good="good" />
      </div>
      <!-- 上拉加载 -->
      <XtxInfiniteLoading @load="loadData" :isFinished="isFinished" :isLoading="isLoading"/>
    </div>
  </div>
</template>

<script>
import SubHead from './components/sub-head.vue'
import SubFilter from './components/sub-filter.vue'
import SubSort from './components/sub-sort.vue'
import GoodsItem from './components/goods-item.vue'
import { useSubCate, useLoadData } from './serve/sub'

export default {
  name: 'SubCategory',
  components: { SubHead, SubFilter, SubSort, GoodsItem },
  setup () {
    const { subCate } = useSubCate()
    const { isFinished, isLoading, goodsList, loadData, hFilterChange, hSortChange } = useLoadData()
    return { subCate, goodsList, isLoading, isFinished, hFilterChange, hSortChange, loadData }
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
.sort-list-container {
    display: flex;
    flex-wrap: wrap;
 }
</style>
